import '@/styles/globals.css';
import React, { ReactNode, ReactElement } from 'react';
import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { IntlProvider } from 'react-intl';
//eslint-disable-next-line
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  Layout?: ({ children }: { children: ReactNode }) => ReactElement<any, any>; //eslint-disable-line
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

import messages from '@/locale';
import { Lang } from '@/apps';
import { getLangByRouter } from '@/components/utils/locale';

import store from '@/modules/store';
import { Provider } from 'react-redux';

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const Layout = Component.Layout ?? null;
  const router = useRouter();
  const lang: Lang = getLangByRouter(router);

  if (Layout) {
    return (
      <>
        <Provider store={store}>
          <IntlProvider locale={lang.lang} messages={messages[lang.lang]}>
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </IntlProvider>
        </Provider>
      </>
    );
  } else {
    return (
      <>
        <Provider store={store}>
          <IntlProvider locale={lang.lang} messages={messages[lang.lang]}>
            <Component {...pageProps} />
          </IntlProvider>
        </Provider>
      </>
    );
  }
}
